<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">border-image属性是速记属性用于设置</div>

    <style>
      /* border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。 */

      .box {
        width: 220px;
        height: 200px;
        background-color: lightblue;
        margin: 50px;

        /* border: 50px solid transparent; */
        border-width: 50px;
        border-style: dashed;
        /* border-color: red; */

        /* padding: 15px; */

        /* border-width: 10px; */
        /* 
        border-style: dashed;
        border-color: lightcoral; */

        /* border-image-source: url("./border.png");
        border-image-slice: 50% 50%;
        border-image-width: 10px;
        border-image-outset: 30 30;
        border-image-repeat: repeat; */

        /* border-image: url(border.png) 30 round; */

        border-image-source: url(border.png);
        border-image-slice: 27;
        border-image-width: 1;
        /* border-image-outset: 10px; */
        border-image-outset: 0px;

        /* border-image-repeat: stretch; */
        /* border-image-repeat: repeat; */
        /* border-image-repeat: round; */
        border-image-repeat: stretch;

        /* 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round） */

        /* 1 需要留边框宽度 边框样式任意 */
        /* 2  source设置路径  */
        /* slice 裁剪图片 区分角和边 九宫格 */
        /* width 边框宽度的倍数 => 实际边框如片的宽度 1 */
        /* outset 边框图片向外偏移 */
        /* repeat 四个边的图片 如何展示 */
      }
    </style>
  </body>
</html>
